<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短路小案例</title>
</head>
<body>
    <form action="https://www.xiaobangcai.com/" method="post" id="myForm">
        用户名:<input type="text" name="username" value="" id="username" />
        <hr />
        协议:<input type="checkbox" name="ck" id="ck" />
        <hr>
        <button type="submit">
            提交
        </button>
    </form>
</body>
</html>

<script type="text/javascript">
//获取指定元素DOM
    function query(el){
        return document.querySelector(el);
    }
    query("#myForm").addEventListener("submit",function(event){
        let username = query("[name='username']").value.trim();
        let ck = query("[name='ck']").checked;
        if(!username || !ck){
            alert('请填写用户名或者勾选协议');
            //去除默认事件
            event.preventDefault();
        }
        
    });
    
</script>